<template>
  <div class="xtx-checkbox" @click="toggle">
    <i v-if="isChecked" class="iconfont icon-checked"></i>
    <i v-if="!isChecked" class="iconfont icon-unchecked"></i>
    <span>
      <slot />
    </span>
  </div>
</template>
<script>
import { unref } from "vue";
import { useVModel } from "@vueuse/core";

export default {
  name: "XtxCheckbox",
  props: ["modelValue"],
  setup(props, { emit }) {
    // use组件库 自动双向绑定 直接更改即可
    const isChecked = useVModel(props, "modelValue", emit);
    // 复选框的选中状态
    // const isChecked = ref(false);
    // 修改复选框的选中状态
    const toggle = () => {
      // 取反
      isChecked.value = !unref(isChecked);
      // emit("update:modelValue", isChecked.value);
    };
    // 监听modelValue值的变化
    // watch(
    //   () => props.modelValue,
    //   () => {
    //     // 发生变化后 将值赋值给 isChecked
    //     isChecked.value = props.modelValue;
    //   }
    // );
    return { isChecked, toggle };
  },
};
</script>
<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>
